<template>
    <div template>
        <div style="padding-bottom: 30px; text-align: center;">
            <div class="item" v-for=" v in $root.menusarr">
                <div @click="tolink(v)">
                    <img style="display: block;margin:10px auto 0; width: 50px;height: 50px;border-radius: 50%;border: 1px solid #ccc;background-color:white"
                        :src="v.ico" alt="">
                    <div style="padding:8px 10px 10px;text-align: center;">
                        <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: white;">{{ v.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        tolink(v) {
            window.open(v.link)
        }
    }
}
</script>

<style scoped>
.item {
    display: inline-block;
    margin: 30px 20px 0;
    width: 200px;
    height: 100px;
    box-shadow: 0 0 10px 0 #aaa;
    background-color: rgba(220, 220, 220, 0.392);
    border: 1px solid #fff;
    box-shadow: 2px 2px 0px 0px #cd6a19;
    cursor: pointer;
}
</style>